<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">职称申报管理</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">职称申报</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片的导航 -->
    <div>
      <!-- :stretch="true" -->
      <el-tabs type="card" :stretch="true" v-model="checkName" @tab-click="handleClick">

        <!-- 职称申报的基本信息部分 -->
        <el-tab-pane name="n1">
          <span slot="label" @click="sFn1">基本信息</span>
          <div>
            <el-form
              :label-position="labelPosition"
              label-width="120px"
              :model="basicInfo"
              :rules="rules"
              ref="basicInfo"
              class="demo-ruleForm"
            >
              <!-- 第一行 -->
              <el-row>
                <el-col :span="24">
                  <h2>基本信息</h2>
                </el-col>
              </el-row>
              <!-- 第二行 -->
              <el-row>
                <el-col :span="8">
                  <div class="col_css">
                    <el-form-item label="姓名">
                      <el-input v-model="basicInfo.name"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                      <el-select v-model="basicInfo.sex" placeholder="男" disabled>
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="民族" prop="nation">
                      <el-select v-model="basicInfo.nation" placeholder="汉" disabled>
                        <el-option label="汉" value="汉"></el-option>
                        <el-option label="满" value="满"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="固定电话">
                      <el-input v-model="basicInfo.tel" placeholder="0591-28352835"></el-input>
                    </el-form-item>
                    <el-form-item label="最高学历" prop="education">
                      <el-select v-model="basicInfo.education">
                        <el-option label="本科" value="本科"></el-option>
                        <el-option label="硕士" value="硕士"></el-option>
                        <el-option label="大专" value="大专"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="毕业时间" prop="date1">
                      <el-date-picker type="date" placeholder="选择日期" v-model="basicInfo.date1"></el-date-picker>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="col_css">
                    <el-form-item label="证件类型">
                      <el-input v-model="basicInfo.idType"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone">
                      <el-input v-model="basicInfo.phone" placeholder="05928352835"></el-input>
                    </el-form-item>
                    <el-form-item label="籍贯" prop="location">
                      <el-select v-model="basicInfo.location" placeholder="合肥" disabled>
                        <el-option label="合肥" value="合肥"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="参加工作时间" prop="enterWorkTime">
                      <el-input v-model="basicInfo.enterWorkTime" placeholder="1568-09-08"></el-input>
                    </el-form-item>
                    <el-form-item label="毕业院校" prop="gduColleges">
                      <el-input v-model="basicInfo.gduColleges"></el-input>
                    </el-form-item>
                    <el-form-item label="行政职务" prop="duty">
                      <el-input v-model="basicInfo.duty"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="col_css">
                    <el-form-item label="证件号码">
                      <el-input v-model="basicInfo.id"></el-input>
                    </el-form-item>
                    <el-form-item label="出生日期" prop="date2">
                      <el-date-picker type="date" placeholder="选择日期" v-model="basicInfo.date2"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="电子邮箱">
                      <el-date-picker type="email" v-model="basicInfo.email"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="政治面貌" prop="outlook">
                      <el-select v-model="basicInfo.outlook" placeholder="党员">
                        <el-option label="党员" value="党员"></el-option>
                        <el-option label="共青团员" value="共青团员"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="所学专业" prop="major">
                      <el-input v-model="basicInfo.major"></el-input>
                    </el-form-item>
                    <el-form-item label="行政级别">
                      <el-input v-model="basicInfo.level"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <!-- 第三行 -->
              <el-row>
                <el-col :span="24">
                  <h2>职称外语、计算机情况</h2>
                </el-col>
              </el-row>
              <!-- 第四行 -->
              <el-row>
                <el-col :span="8">
                  <div class="edu_css">
                    <el-form-item label="职称外语考试情况" label-width="220">
                      <el-input v-model="basicInfo.p1" placeholder="完成" style="width:200px"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class>
                    <el-form-item label="职称计算机考试情况" label-width="220">
                      <el-input v-model="basicInfo.p2" placeholder="完成" style="width:200px"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class></div>
                </el-col>
              </el-row>
              <!-- 第五行 -->
              <el-row>
                <el-col :span="24">
                  <h2>身份证复印件</h2>
                </el-col>
              </el-row>
              <!-- 第六行 -->
              <el-row>
                <el-row>
                  <el-col :span="6">
                    <div class>
                      <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                      >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class>
                      <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                      >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple"></div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple-light"></div>
                  </el-col>
                </el-row>

                <el-col :span="12">
                  <div class></div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light"></div>
                </el-col>
              </el-row>
              <!-- 第七行 -->
              <el-row>
                <el-col :span="24">
                  <div>
                    <el-button plain @click="submitForm('basicInfo')" class="btn_css">保存</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>

        <!-- 职称申报的工作信息部分 -->
        <el-tab-pane name="n2">
          <span slot="label" @click="sFn2">工作信息</span>
          <!-- 这里引入组件 -->
          <process2Z></process2Z>
        </el-tab-pane>

        <!-- 职称申报的学历信息部分 -->
        <el-tab-pane name="n3">
          <span slot="label" @click="sFn3">学历信息</span>
          <!-- 这里引入组件 -->
          <process3Z></process3Z>
        </el-tab-pane>

        <!-- 职称申报的资历信息部分 -->
        <el-tab-pane name="n4">
          <span slot="label" @click="sFn4">资历信息</span>
          <!-- 这里引入组件 -->
          <process4Z></process4Z>
        </el-tab-pane>

        <!-- 职称申报的社会团体任职部分 -->
        <el-tab-pane name="n5">
          <span slot="label" @click="sFn5">社会团体任职</span>
          <!-- 这里引入组件 -->
          <process5Z></process5Z>
        </el-tab-pane>

        <!-- 职称申报的继续教育部分 -->
        <el-tab-pane name="n6">
          <span slot="label" @click="sFn6">继续教育</span>
          <!-- 这里引入组件 -->
          <process6Z></process6Z>
        </el-tab-pane>

        <!-- 职称申报的职业/执业资格部分 -->
        <el-tab-pane name="n7">
          <span slot="label" @click="sFn7">职业/执业资格</span>
          <!-- 这里引入组件 -->
          <process7Z></process7Z>
        </el-tab-pane>

        <!-- 职称申报的业绩成果部分 -->
        <el-tab-pane name="n8">
          <span slot="label" @click="sFn8">业绩成果</span>
          <!-- 这里引入组件 -->
          <process8Z></process8Z>
        </el-tab-pane>
        
        <!-- 职称申报的著作论文部分 -->
        <el-tab-pane name="n9">
          <span slot="label" @click="sFn9">著作论文</span>
          <!-- 这里引入组件 -->
          <process9Z></process9Z>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style scoped lang="less">
</style>